<template>
	<page-meta :page-style="'overflow:'+(showOilPop||showOkPop||showGiftPop?'hidden':'visible')"></page-meta>
	<view class="signin_pages">
		<image class="signin_bk_img" :src="onlinePic+'signin/bk.png'" mode="widthFix"></image>
		<view class="signin_pages_box">
			<view class="user_info_box">
				<view class="avatar_box">
					<image v-if="info" class="avater_img" :src="picUrl+info.user.headimg_url" mode="aspectFill">
					</image>
					<image v-if="info.user.avatar_border" class="my_avatar_border"
						:src="picUrl+info.user.avatar_border">
					</image>
				</view>
				<view style="margin-left: 25rpx;">
					<view class="user_info_name ellipsis">
						{{info.user.username?info.user.username:''}}
					</view>
					<view class="f-12">{{info.sign_number_text}}</view>
				</view>
			</view>
			<view class="signin_box">
				<view class="signin_xiong_box">
					<image class="signin_xiong_img" :src="onlinePic+'signin/signin_xiong.png'"></image>
				</view>
				<view class="days_box">
					<view class="days_box_top">
						<view class="f-15 f-w">签到领奖励</view>
						<view class="">
							<image v-for="item in barrel_four" :key="item.pic" class="have_oil" :src="picUrl+item.pic"
								mode="aspectFill">
							</image>
							<image @click="showOilPop=true" class="have_oil" :src="onlinePic+'signin/check_oil.png'"
								mode="aspectFill">
							</image>
						</view>
					</view>
					<uni-row :gutter="20">
						<uni-col v-for="(item,index) in list" :key="item.id" :span="item.colnum==1?6:12">
							<view class="days_cell_box" @click="showGiftPopClick(item.id,index)">
								<view class="f-12 c-999999">{{item.week}}</view>
								<view v-if="item.prize_id>0"
									:class="item.is_sign==2?'days_cell':'days_cell days_cell_gift'">
									<view v-if="item.colnum==1" :class="item.is_sign==2?'':'days_cell_gift_bk310'"
										:style="item.is_sign==2?'':'background-image: url('+onlinePic+'signin/emit_h.png);'">
										<view class="f-12">{{item.days}}</view>
										<!-- <image v-if="item.is_sign==2" class="days_oil_img"
											:src="item.prize_info.pic?picUrl+item.prize_info.pic:picUrl+item.pic"
											mode="aspectFill"
											style="-webkit-filter: grayscale(100%);filter: grayscale(100%);"></image> -->
										<image class="days_oil_img"
											:src="item.prize_info.pic?picUrl+item.prize_info.pic:picUrl+item.pic"
											mode="aspectFill"></image>
										<view class="f-12 c-999999">
											{{item.prize_info.text?item.prize_info.text:item.integral_text}}
										</view>
									</view>
									<view v-else :class="item.is_sign==2?'':'days_cell_gift_bk613'"
										:style="item.is_sign==2?'':'background-image: url('+onlinePic+'signin/emit_w.png);'">
										<view class="days7_time f-12">{{item.days}}</view>
										<!-- <image v-if="item.is_sign==2" class="days7_oil_img"
											:src="item.prize_info.pic?picUrl+item.prize_info.pic:picUrl+item.pic"
											mode="aspectFill"
											style="-webkit-filter: grayscale(100%);filter: grayscale(100%);"></image> -->
										<image class="days7_oil_img"
											:src="item.prize_info.pic?picUrl+item.prize_info.pic:picUrl+item.pic"
											mode="aspectFill"></image>
										<view class="days7_oilnum f-12 c-999999">
											{{item.prize_info.text?item.prize_info.text:item.integral_text}}
										</view>
									</view>
								</view>
								<view v-else class="days_cell">
									<view class="f-12">{{item.days}}</view>
									<image v-if="item.is_sign==2" class="days_oil_img" :src="picUrl+item.pic"
										mode="aspectFill"
										style="-webkit-filter: grayscale(100%);filter: grayscale(100%);"></image>
									<image v-else class="days_oil_img" :src="picUrl+item.pic" mode="aspectFill"></image>
									<view class="f-12 c-999999">{{item.integral_text}}</view>
								</view>
							</view>
						</uni-col>
					</uni-row>
					<view
						:class="info.sign_status==0?'group_public_btn_block f-w mt-15':'group_defult_btn_block f-w mt-15'"
						@click="changeSignin" style="font-size: 36rpx;">立即签到</view>
					<view v-if="isdaysall==1" class="display_flex f-12 mt-15" style="justify-content: center;"
						@click="changeDaysAll(1)">
						<view>收起</view>
						<uni-icons type="up" size="14" color="#000000"></uni-icons>
					</view>
					<view v-else class="display_flex f-12 mt-15" style="justify-content: center;"
						@click="changeDaysAll(2)">
						<view>展开查看所有签到福利</view>
						<uni-icons type="down" size="14" color="#000000"></uni-icons>
					</view>
				</view>
				<view class="task_box">
					<view class="display_flex">
						<view class="f-15 f-w flex-1">任务中心</view>
						<view class="c-00A0DC f-12" @click="goRecordlist">收益记录 > </view>
					</view>
					<view class="task_cell_box">
						<view v-for="(item,index) in tasklist" :key="item.name" class="task_cell">
							<image class="task_cell_icon" :src="picUrl+item.pic"></image>
							<view class="ml-10 flex-1">
								<view class="f-13">{{item.name}}</view>
								<view class="display_flex" style="margin-top: 6rpx;">
									<view class="task_oilnums">{{item.integral}}</view>
									<view class="f-10 c-999999 ml-10">{{item.remark}}</view>
								</view>
							</view>
							<view class="display_flex">
								<view class="f-12 c-999999">{{item.finish_number}}/{{item.number}}</view>
								<view v-if="item.status==0">
									<button v-if="item.id==3" @click="goPath(item.id,item.path,item.name,item.path_type)"
										open-type="share" class="task_status_no_btn ml-5">去完成</button>
									<view v-else @click="goPath(item.id,item.path,item.name,item.path_type)"
										class="task_status_no ml-5">去完成</view>
								</view>
								<view v-else class="task_status_ok ml-5">已完成</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="showOilPop" class="mask_box" @click="closePopup"></view>
		<view class="popup_signin_box" style="max-height: 840rpx;left: 50rpx;right: 50rpx;top: 20%;" v-if="showOilPop">
			<view class="popup_signin_top_left_block"></view>
			<image class="popup_signin_xiong" :src="onlinePic+'signin/signin_xiong.png'"></image>
			<view class="popup_signin_top_right_block"></view>
			<view class="signin_pop_oil_block">
				<view class="signin_pop_top_text_box">
					<view class="signin_pop_top_text">集油累计
						<view class="racy_line_box"></view>
					</view>
				</view>
			</view>
			<view class="popup_signin_days_box" style="overflow: auto;max-height: 490rpx;padding: 0 30rpx;">
				<uni-row :gutter="20">
					<uni-col v-for="(item,index) in barrel" :key="item.pic" :span="8">
						<view class="days_cell_box">
							<view class="days_cell" style="height: auto;">
								<image class="pop_have_oil" :src="picUrl+item.pic"></image>
								<view class="c-999999 f-11 mt-5">{{item.text}}</view>
							</view>
						</view>
					</uni-col>
				</uni-row>
			</view>
			<view style="padding: 0 30rpx 40rpx 30rpx;" @click="goBottom">
				<view v-if="info.barrel_number>0||info.user_integral>0" class="group_public_btn_block f-w f-18 mt-15">
					{{info.barrel_number?info.barrel_number+'桶':''}}{{info.user_integral>0?' / '+info.user_integral+'L':''}}
				</view>
				<view class="c-00A0DC f-14 text-c mt-10" style="text-decoration: underline;">完成任务领取更多</view>
			</view>
		</view>
		<view v-if="showOkPop" class="mask_box" @click="closePopup"></view>
		<view class="popup_signin_box" style="left: 104rpx;right: 104rpx;top: 20%;" v-if="showOkPop">
			<view class="popup_signin_top_left_block"></view>
			<image class="popup_signin_xiong" :src="onlinePic+'signin/signin_xiong.png'"></image>
			<view class="popup_signin_top_right_block"></view>
			<view class="signin_pop_oil_block">
				<view class="signin_pop_top_text_box">
					<view class="signin_pop_top_text">签到成功
						<view class="racy_line_box"></view>
					</view>
				</view>
				<view class="c-666666 f-14 text-c">{{info.sign_number_text}}</view>
				<view class="text-c mt-20">
					<image class="signin_ok_pop_img"
						:src="info.sign_info.prize_info.pic?picUrl+info.sign_info.prize_info.pic:picUrl+info.sign_info.pic"
						mode="aspectFill"></image>
				</view>
				<view class="c-00A0DC f-w f-18 text-c mt-15">
					{{info.sign_info.prize_info.text?info.sign_info.prize_info.text:info.sign_info.integral_text}}
				</view>
				<view @click="goBottom" class="c-666666 f-14 text-c mt-20"
					style="text-decoration: underline;padding-bottom: 50rpx;">
					完成任务领取更多奖励</view>
			</view>
		</view>
		<view v-if="showGiftPop" class="mask_box" @click="closePopup"></view>
		<view class="popup_signin_box" style="left: 104rpx;right: 104rpx;top: 20%;" v-if="showGiftPop">
			<view class="popup_signin_top_left_block"></view>
			<image class="popup_signin_xiong" :src="onlinePic+'signin/signin_xiong.png'"></image>
			<view class="popup_signin_top_right_block"></view>
			<view class="signin_pop_oil_block">
				<view class="signin_pop_top_text_box">
					<view class="signin_pop_top_text">奖励说明
						<view class="racy_line_box"></view>
					</view>
				</view>
			</view>
			<view class="c-666666 f-14 text-c">{{giftInfo.prize_info.title}}</view>
			<view class="text-c mt-20">
				<image style="width: 172rpx;height: 174rpx;"
					:src="giftInfo.prize_info.pic?picUrl+giftInfo.prize_info.pic:picUrl+giftInfo.pic" mode="aspectFill">
				</image>
			</view>
			<view class="c-00A0DC f-w f-18 text-c mt-15">
				{{giftInfo.prize_info.text?giftInfo.prize_info.text:giftInfo.integral_text}}
			</view>
			<view @click="closePopup" class="c-666666 f-14 text-c mt-20"
				style="text-decoration: underline;padding-bottom: 50rpx;">
				我知道了</view>
		</view>
	</view>
</template>

<script>
	import {
		getSigninInfo,
		changeSignin,
		getTaskList
	} from '@/api/motortime.js';
	let app = getApp()
	export default {
		data() {
			return {
				showOkPop: false,
				showGiftPop: false,
				showOilPop: false,
				user_id: '',
				userinfo: '',
				isdaysall: 0,
				info: '',
				list: [],
				list7: [],
				alllist: [],
				barrel: [],
				barrel_four: [],
				tasklist: [],
				share_url: '',
				giftInfo: '',
				picUrl: app.globalData.picUrl,
				onlinePic: app.globalData.onlinePic,
			};
		},
		onShow() {
			if (!uni.getStorageSync('access_token')) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			} else {
				this.userinfo = uni.getStorageSync('userinfo')
				this.user_id = uni.getStorageSync('userinfo').user_id
			}
			if (uni.getStorageSync('onload')) {
				this.getSigninInfo()
				this.getTaskList()
				uni.removeStorage({
					key: 'onload'
				})
			}
			if (uni.getStorageSync('onloadbbs')) {
				this.getTaskList()
				uni.removeStorage({
					key: 'onloadbbs'
				})
			}
			this.share_url = ''
		},
		onLoad() {
			if (uni.getStorageSync('access_token')) {
				this.userinfo = uni.getStorageSync('userinfo')
				this.user_id = uni.getStorageSync('userinfo').user_id
				this.getSigninInfo()
				this.getTaskList()
			}
			var params = {
				event_code: '签到',
				path: 'pages/signin/signin',
				event_id: '',
				title: '',
				source_page: '',
				value: '',
			}
			app.BurialPoint(params)
		},
		methods: {
			getSigninInfo() {
				getSigninInfo({
					user_id: this.user_id
				}).then(res => {
					if (res.state == 1) {
						this.info = res.data.info
						this.barrel = res.data.info.barrel
						this.barrel_four = res.data.info.barrel_four
						this.alllist = res.data.info.sign_list
						var sign_list = res.data.info.sign_list
						if (sign_list.length > 0) {
							if (this.isdaysall == 1) {
								this.list = sign_list
							} else {
								this.list = sign_list.slice(-7)
							}
							this.list7 = sign_list.slice(-7)
						}
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			getTaskList() {
				getTaskList({
					user_id: this.user_id
				}).then(res => {
					if (res.state == 1) {
						this.tasklist = res.data.list
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			changeSignin() {
				if (this.info.sign_status == 0) {
					changeSignin({
						user_id: this.user_id
					}).then(res => {
						if (res.state == 1) {
							this.getSigninInfo()
							this.getTaskList()
							this.showOkPop = true
						} else {
							uni.showToast({
								title: res.error[0],
								mask: true,
								icon: 'none',
								duration: 1500
							})
						}
					})
					var params = {
						event_code: '签到',
						path: 'pages/signin/signin',
						event_id: '',
						title: '',
						source_page: '签到-立即签到',
						value: '',
					}
					app.BurialPoint(params)
				}
			},
			changeDaysAll(type) {
				if (type == 1) {
					this.list = this.list7
					this.isdaysall = 0
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 300 // 滚动过渡时间（单位ms）
					});
				} else {
					this.list = this.alllist
					this.isdaysall = 1
					uni.pageScrollTo({
						scrollTop: 320,
						duration: 300 // 滚动过渡时间（单位ms）
					});
				}

			},
			closePopup() {
				this.showOilPop = false
				this.showOkPop = false
				this.showGiftPop = false
			},
			showGiftPopClick(id, index) {
				if (this.list[index].prize_id > 0) {
					this.giftInfo = this.list[index]
					this.showGiftPop = true
				}
				var params = {
					event_code: '签到',
					path: 'pages/signin/signin',
					event_id: '',
					title: '',
					source_page: '签到-查看奖品',
					value: '',
				}
				app.BurialPoint(params)
			},
			goBottom() {
				uni.pageScrollTo({
					scrollTop: 99999
				})
				this.showOilPop = false
				this.showOkPop = false
			},
			goRecordlist() {
				var params = {
					event_code: '签到',
					path: 'pages/signin/signin',
					event_id: '',
					title: '',
					source_page: '点击跳转收益记录',
					value: '',
				}
				app.BurialPoint(params)
				uni.navigateTo({
					url: '/pages/signin/recordlist'
				})
			},
			goPath(id, path, name, type) {
				if (type == 'navigateTo') {
					uni.navigateTo({
						url: path
					})
				} else if (type == 'switchTab') {
					if(name=='点赞'||name=='发表评论'){
						uni.setStorage({
							key: 'taskType',
							data: 'true',
							success() {
								uni.switchTab({
									url: path
								})
							}
						})
					}else{
						uni.switchTab({
							url: path
						})
					}
					
				} else if (type == 'share') {
					this.share_path = path
				}
				var params = {
					event_code: '签到',
					path: 'pages/signin/signin',
					event_id: '',
					title: '',
					source_page: '签到-' + name,
					value: '',
				}
				app.BurialPoint(params)
			},
		},
		onShareAppMessage(res) {
			app.getShareTask()
			if (res.from === 'button') { // 来自页面内分享按钮
				return {
					path: this.share_url + '?invitation_id=' + this.user_id
				}
			} else {
				return {

				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F7F7;
	}

	.signin_pages {
		position: relative;

		.signin_bk_img {
			width: 100%;
		}

		.signin_pages_box {
			top: 0;
			left: 0;
			right: 0;
			position: absolute;
			z-index: 1;

			.user_info_box {
				color: #FFFFFF;
				padding: 60rpx 30rpx 0 30rpx;
				display: flex;
				align-items: center;
				position: relative;

				.user_info_name {
					font-size: 36rpx;
					font-weight: bold;
				}

				.edit_icon {
					width: 30rpx;
					height: 30rpx;
					margin-left: 10rpx;
				}

				.avatar_box {
					// 框150x150，头像120x120 :框和头像的比例是5：4 
					width: 150rpx;
					height: 150rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;

					.avater_img {
						width: 120rpx;
						height: 120rpx;
						border-radius: 100%;
					}

					.my_avatar_border {
						width: 150rpx;
						height: 150rpx;
						position: absolute;
						top: 0;
						right: 0;
						bottom: 0;
						left: 0;
						z-index: 1;
					}

					.avater_v_icon {
						width: 30rpx;
						height: 30rpx;
						position: absolute;
						right: 10rpx;
						bottom: 0;
						z-index: 1;
					}
				}

				.info_icons {
					position: absolute;
					right: 30rpx;
					top: 60rpx;
					z-index: 2;
				}
			}

			.signin_box {
				margin-top: -40rpx;
				padding: 0 30rpx;

				.signin_xiong_box {
					text-align: right;
					padding-right: 55rpx;

					.signin_xiong_img {
						width: 120rpx;
						height: 100rpx;
						vertical-align: middle;
					}
				}

				.days_box {
					padding: 30rpx;
					margin-top: -14rpx;
					border-radius: 8rpx;
					background-color: #FFFFFF;

					.days_box_top {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding-bottom: 25rpx;
						border-bottom: 1rpx solid #F1F1F1;

						.have_oil {
							width: 48rpx;
							height: 60rpx;
							margin-left: 10rpx;
							vertical-align: middle;
						}
					}
				}
			}

			.task_box {
				padding: 30rpx;
				margin-top: 30rpx;
				margin-bottom: 80rpx;
				border-radius: 8rpx;
				background-color: #FFFFFF;

				.task_cell_box {
					padding-top: 20rpx;

					.task_cell {
						display: flex;
						align-items: center;
						padding: 30rpx 0;
						border-bottom: 1rpx solid #F1F1F1;

						.task_cell_icon {
							width: 75rpx;
							height: 75rpx;
							vertical-align: middle;
						}

						.task_oilnums {
							color: #00A0DC;
							font-size: 18rpx;
							padding: 1rpx 16rpx;
							border-radius: 4rpx;
							background-color: #E5F5FB;
							border: 1rpx solid #ADE9FF;
						}

						.task_status_ok {
							color: #999999;
							font-size: 20rpx;
							padding: 4rpx 10rpx;
							border-radius: 30rpx;
							background-color: #E6E6E6;
							border: 1rpx solid #C6C6C6;
						}

						.task_status_no {
							color: #00A0DC;
							font-size: 20rpx;
							padding: 4rpx 10rpx;
							border-radius: 30rpx;
							background-color: #FFFFFF;
							border: 1rpx solid #ADE9FF;
						}

						.task_status_no_btn {
							color: #00A0DC;
							font-size: 20rpx;
							padding: 4rpx 10rpx;
							border-radius: 30rpx !important;
							background-color: #FFFFFF;
							border: 1rpx solid #ADE9FF;
							line-height: normal;
							box-sizing: content-box;
						}

						button::after {
							border: 1rpx solid #ADE9FF !important;
							border-radius: 30rpx !important;
						}
					}

					.task_cell:last-child {
						border-bottom: none;
					}
				}
			}

		}

		.signin_pop_oil_block {
			width: 100%;
			border-top-left-radius: 8rpx;
			border-top-right-radius: 8rpx;

			.signin_pop_top_text_box {
				display: flex;
				align-items: center;
				justify-content: center;
				padding-top: 50rpx;

				.signin_pop_top_text {
					position: relative;
					color: #000000;
					font-size: 50rpx;
					font-weight: bold;
					letter-spacing: 1rpx;
				}

				.racy_line_box {
					position: absolute;
					top: 48rpx;
					left: -8rpx;
					right: 0;
					margin: 0 auto;
					z-index: -1;
					width: 220rpx;
					height: 13rpx;
					background-color: rgba(0, 160, 220, 0.2);
				}
			}
		}

		.signin_ok_pop_img {
			width: 180rpx;
			max-height: 180rpx;
		}
	}
</style>